<template>
	<view class="page-toast" v-if="toastOptions.length">
		<view class="toast" v-for="(one, index) of toastOptions" @click="remove(one, index)">
			<view class="iconfont icon-check-circle-fill" v-if="one.type == 'success'"></view>
			<view class="iconfont icon-close-circle-fill" v-if="one.type == 'danger'"></view>
			<view class="iconfont icon-sound-fill" v-if="one.type == 'info'"></view>
			<view class="iconfont icon-warning-circle-fill" v-if="one.type == 'warning'"></view>
			<view class="text">{{ one.text }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {},
	computed: {
		toastOptions() {
			return this.$store.state.toastOptions;
		}
	},
	data() {
		return {};
	},
	methods: {
		remove(one, index) {
			this.$store.state.toastOptions.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped="">
@keyframes run {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.page-toast {
	position: fixed;
	top: var(--status-bar-height);
	margin-top: 100upx;
	left: 0;
	right: 0;
	background-color: #fff;
	box-shadow: 0 10upx 20upx rgba($color: #000000, $alpha: 0.05);
	display: flex;
	flex-direction: column;
	text-align: left;
	z-index: 100;
	.toast {
		display: flex;
		align-items: center;
		font-size: $uni-font-size-base;
		padding: 15upx 20upx;
		overflow: hidden;
		border-bottom: 1upx solid #DDD;

		&:last-child {
			border-bottom: none;
		}

		.icon-check-circle-fill {
			color: $juhe-success-color;
		}
		.icon-close-circle-fill {
			color: $juhe-danger-color;
		}
		.icon-sound-fill {
			color: $juhe-info-color;
		}

		.icon-warning-circle-fill {
			color: $juhe-warning-color;
		}
		.iconfont {
			margin-right: 20upx;
			animation: run 1s;
		}

		.icon {
			width: 30upx;
			height: 30upx;
			min-width: 30upx;
			min-height: 30upx;
			margin-right: 20upx;
		}
	}
}
</style>
